<style scoped>
.footer-tab-wrapper {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 1rem;
	height: calc(.88rem + env(safe-area-inset-bottom));
	padding-top: .09rem;
	padding-bottom: .12rem;
	padding-bottom: calc(.15rem + env(safe-area-inset-bottom));
	position: fixed;
	bottom: 0;
	z-index: 10;
	color: #999;
	font-size: .2rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
	box-sizing: border-box;
	box-shadow: 0 -2px 4px 0 rgba(39, 39, 44, .05);
	background-color: #FFF;

	& .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
}
.nav-icons {
	width: .44rem;
	height: .44rem;
	background-size: 100% 100%;
}
@for $i from 1 to 4 {
    .item:nth-of-type($i) .nav-icons {
        background-image: url(~@/assets/nav/nav-$i.png);
    }
}
.scan-icon {
	width: .64rem;
	height: .64rem;
	opacity: .5;
	border-radius: 50%;
	background: #377CFF url(~@/assets/nav/nav-scan.png) center no-repeat;
	background-size: .44rem .44rem;
}
</style>

<template>
	<div class="footer-tab-wrapper" :class="{iphonex: isIphonex}">
		<template v-for="(item, index) of nav">
			<template v-if="item.isScan">
				<span class="scan-icon" @click="scan"></span>
			</template>
			<template v-else>
				<div class="item" :class="{selected: index === activedIndex}" @click="redirect(item.path)">
					<span class="nav-icons"></span>
					{{item.text}}
				</div>
			</template>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'footer-tab',

		props: {
			activedIndex: {
				type: Number,
				required: true
			}
		},

		data() {
			return {
				nav: [
					{
						text: '首页',
						path: '/'
					},
					{
						text: '消息',
						path: '/message'
					},
					{
						isScan: true
					},
					{
						text: '广场',
						path: '/discover'
					},
					{
						text: '我的',
						path: '/my'
					}
				]
			}
		},

		computed: {
			isIphonex(){
				return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812
			}
		},

		methods: {
			scan() {
				this.$emit('scan')
			},
			redirect(path) {
				this.$router.push(path)
			}
		}
	}
</script>